import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import {
  Modal,
  Button,
  Form,
  message,
  Card,
  Row,
  Col,
  Upload,
  Input,
  DatePicker,
  Select,
  InputNumber,
  Table,
} from 'antd';
import PropTypes from 'prop-types';
import styles from './index.less';
import { filterList } from '@/lib/dataType';

const mapStateToProps = (state: any) => ({
  FleetMng: state.FleetMng,
});
class BindDetailModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      vinList: [],
      filterList: [],
    };
  }
  componentDidUpdate(prevProps: any) {
    const { modalVisible, formData, dispatch } = this.props;

    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      const postData = {
        sid: formData.sid,
      };
      dispatch({
        type: 'FleetMng/getData',
        payload: {
          url: '/msalcohollock/fleet/vehicle/list',
          ...postData,
        },
        callback: (res: any) => {
          const list = res.data ?? [];
          this.setState({ vinList: list, filterList: list });
        },
      });
    }
  }
  handleSubmit = () => {
    this.formRef.current?.submit();
  };
  handleFormReset = () => {
    const { vinList } = this.state;
    this.formRef.current?.resetFields();
    this.setState({ filterList: vinList });
  };
  onFinish = (values: any) => {
    const { vinList } = this.state;
    const { code = '', vin = '' } = values;
    const filterList = vinList.filter(
      t =>
        (t.vin ?? '').includes(vin) &&
        ((t.handheldsCode ?? '').includes(code) || (t.cboxCode ?? '').includes(code)),
    );
    this.setState({ filterList });
  };

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  };
  render() {
    const { loading, filterList } = this.state;
    const { modalVisible, formData } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'no',
        key: 'no',
        render: (text: any, record: any, index: any) => {
          return index + 1;
        },
      },
      {
        title: 'VIN',
        dataIndex: 'vin',
        key: 'vin',
      },
      {
        title: '车牌号',
        dataIndex: 'lisenceP',
        key: 'lisenceP',
      },
      {
        title: '手持机编号',
        dataIndex: 'handheldsCode',
        key: 'handheldsCode',
      },
      {
        title: '控制盒编号',
        dataIndex: 'cboxCode',
        key: 'cboxCode',
      },
    ];
    return (
      <Modal
        title={'关联车辆'}
        visible={modalVisible}
        width={700}
        footer={null}
        onCancel={this.close}
      >
        <div className={styles.tableListForm}>
          <Form onFinish={this.onFinish} ref={this.formRef}>
            <Row gutter={24} className={styles.my_searchRow}>
              <Col span={8}>
                <Form.Item
                  name={'vin'}
                  rules={[
                    { message: '请输入VIN,只能输入大写英文及数字', pattern: /^[A-Za-z0-9]+$/ },
                  ]}
                  normalize={(value, prevValue, prevValues) => {
                    // 转大写
                    return value.toUpperCase();
                  }}
                >
                  <Input style={{ textTransform: 'uppercase' }} placeholder="VIN" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name={'code'}
                  rules={[{ required: false, message: '不能输入空字符', pattern: /^\S+$/ }]}
                >
                  <Input placeholder="手持机、控制盒编号" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <span style={{ float: 'right' }}>
                  <Button type="primary" size={'small'} htmlType="submit">
                    查询
                  </Button>
                  <Button size={'small'} style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                    重置
                  </Button>
                </span>
              </Col>
            </Row>
          </Form>
        </div>
        <Row></Row>
        <Row gutter={24}>
          <Col span={24}>
            <Table dataSource={filterList} columns={columns} pagination={false} loading={loading} />
          </Col>
        </Row>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(BindDetailModal);
